<template>
  <view>
    <!-- //轮播图 -->
    <view class="search-box">
      <my-search  @click.native="demo"></my-search>
    </view>
    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true" class="swiperr">
      <swiper-item v-for="swiper in swiperList" :key="swpier.goods_id" >
        <navigator  :url="`/subpackage/goods_detail/goods_detail?goods_id=${swiper.goods_id}`">
          <image :src="swiper.image_src" ></image> 
        </navigator>
      </swiper-item>
    </swiper>
    <!-- 导航区域 -->
    <view class="nav">
    <view v-for="(nav,index) in navList" :key="index"  @click="clickNav(nav)">
      <image :src="nav.image_src" ></image><br/>
    </view>
  </view>
  <!-- 楼层区域 -->
  <view class="floor">
  <view class="floor-items" v-for="(floor,index) in floorList" :key="index">
    <image :src="floor.floor_title.image_src" class="floor-title"></image>
    <view class="floor-image">
      <!-- 左侧 -->
      <navigator class="floor-left" :url="floor.product_list[0].url">
       <image :src="floor.product_list[0].image_src" :style="{width:floor.product_list[0].image_width + 'rpx' }" mode="widthFix"></image>
     </navigator>
     <!-- 右侧 --> 
      <view class="floor-right">
        <navigator class="floor-right-item" v-for="(floorImg,index) in floor.product_list" :key="index" v-if="index!==0" :url="floorImg.url">
          <image :src="floorImg.image_src" :style="{width:floorImg.image_width+'rpx'}" mode="widthFix" ></image>           
        </navigator> 
      </view>  
    </view>
  </view>
  </view>
   </view>
</template>

<script>
  import badgeMix from '@/mixins/tabbar-badge.js'
  export default {
      mixins:[ badgeMix ],
    data() {
      return {
        swiperList: [],
        navList:[],
        floorList:[]
      };
    },
    onLoad(){
      this.getData()
      this.getNav()
      this.getFloor()
    },
    methods:{
     async getData(){
       let result = await uni.$http.get('/api/public/v1/home/swiperdata')
       if(result.data.meta.status!=200){
         return uni.showToast({
           title:'数据请求失败',
           duration: 1500,
           icon:'none'
         })
       }
       this.swiperList = result.data.message
      },
     async getNav(){
        let result = await uni.$http.get('/api/public/v1/home/catitems')
         if(result.data.meta.status!=200){
           return uni.$showMsg()
         }
         this.navList = result.data.message
      },
      demo(){
        uni.navigateTo({
          url:'/subpackage/search/search'
        })
      },
     async getFloor(){
        let result = await uni.$http.get('/api/public/v1/home/floordata')
        if(result.data.meta.status!==200) return uni.$showMsg()
        result.data.message.forEach(floor=>{
          floor.product_list.forEach(prod=>{
            prod.url='/subpackage/goods_list/goods_list?'+prod.navigator_url.split('?')[1]
          })
        }) 
        this.floorList = result.data.message
      },    
      clickNav(nav){
        if(nav.name==='分类'){
          uni.switchTab({
            url:'/pages/cate/cate'
          })
        }
      },
    }
  }
</script>

<style lang="scss">
.swiperr{
  height:330rpx;
  swiper-item,image{
    width:100%;
  }
}
.nav{
  display:flex;
  justify-content: space-around;
  image{
    // display:float;
    width:128rpx;
    height:140rpx;
  }
  text{
    font-size: 12px;
  }
}
.floor{
    .floor-title{
     height:60rpx;
     width:100%;
     // display:flex;
    }
    .floor-right{
     display:flex;
     flex-wrap: wrap;
     justify-content: space-around;
    }
    .floor-image{
      display:flex;
      padding-left:10rpx;
    }
}
.search-box{
  position: sticky;
  top:0;
  z-index:999;
}
</style>
